<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠顺序研究</title>
    <style>
        /* box  层叠顺序 大于 html
        1.html 根层叠上文元素  -  设置背景颜色 / 边框 
        2.box 普通的块级元素
         */
        html {
            background-color: goldenrod;
        }
 

         /* 块状元素  -  层叠顺序 相等  => 重叠: 后面会覆盖前面 （后来居上） 
            box  浮动元素  box1 块级元素  层叠顺序：浮动元素 >  块状元素
            层叠顺序：z-index正值> z-index:auto/0 >  inline/inline-block >  浮动元素 >  块状元素
         */
        .box {
            /* float:left; */
            position: relative;
            width: 400px;
            height: 400px;
            background-color: red;
        }
        .box1 {
            position: relative;
            z-index:1;
            margin-top:-50px;
            margin-left:-30px;
            display: inline-block;
            width: 800px;
            height: 800px;
            background-color: green;
        }
    </style>
</head>

<body>

    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>

</body>

</html>